<template>
  <div class="musImg">
     <img :src="require(`../../assets/imgs/ll/${imgs.pic}`)" alt />
     <div class="shadow">
       <div class="shadow-left"><router-link to="" v-html="imgs.name"></router-link></div>
     </div>
  </div>
</template>
<script>
export default {
  props: ["imgs"],
  
}
</script>
<style scoped>
 
 .musImg>img{
   width:12rem;
   height:20rem;
   border-radius: 3px;
   margin-top:2rem;
   position: absolute;
   z-index: -1;
 }
 .shadow{
   width:12rem;
   height:20rem;
   margin-top:2rem;
   position: relative;
 }
 .shadow-left{
   width:6rem;
   height:20rem;
   position: absolute;
   top:0;
   left:0;
   border-radius: 3px 0 0 3px;
   background-color: rgba(202, 187, 187, 0.6);
   text-align: center;
 }
 .shadow-left:hover{
   width:12rem;
   cursor: pointer;
 }
  a:-webkit-any-link {
    text-decoration: none;
    color:grey;
    font-size: 16px;
    writing-mode:vertical-rl;
    margin-top:8rem;
    /* 字体间距 */
    letter-spacing:5px;
  }
  .shadow-left:hover a:-webkit-any-link{
    color:rgb(174, 65, 225);
  }

</style>